---
permalink: "/behaviors/advanced/scroll/section-list/index.xml"
tags: "Behaviors/Advanced/Scroll"
hv_title: "Section List"
hv_button_behavior: "back"
---
{% extends 'templates/base.xml.njk' %}
{% from 'macros/link/index.xml.njk' import link %}

{# Todo rohanbayya: Fix this example #}
{% block styles %}
  <style
    id="list-header"
    alignItems="center"
    backgroundColor="#eee"
    flex="1"
    flexDirection="row"
    height="48"
    marginHorizontal="24"
    paddingLeft="24"
    paddingRight="24"
  />
  <style id="list-header-text" fontSize="18" fontWeight="bold" />
{% endblock %}

{% block container %}
  <section-list xmlns:scroll="https://hyperview.org/hyperview-scroll">
    <item key="top">
      <view id="top" style="links-container">
        {% call link('Scroll to item 15') -%}
          <behavior action="scroll" target="item-15" />
        {%- endcall %}
        {% call link('Scroll to item 25 with offset') -%}
          <behavior action="scroll" target="item-25" scroll:offset="24" />
        {%- endcall %}
        {% call link('Scroll to item 35 with position') -%}
          <behavior action="scroll" target="item-35" scroll:position="0.5" />
        {%- endcall %}
        {% call link('Scroll to bottom, animated') -%}
          <behavior action="scroll" target="bottom" scroll:animated="true" />
        {%- endcall %}
      </view>
    </item>
    {% include './_section-list-content.xml.njk' %}
  </section-list>
{% endblock %}
